<template>
  <scroll-view scroll-x class="selectMenu" :style="`background-color: ${bg};`">
    <view class="nav-list">
      <view v-for="(item, index) in navList" :key="index"
        :style="{ '--color': color, '--selectColor': selectColor, '--bgColor': bgColor, '--selectBgColor': selectBgColor }"
        :class="['nav-item', currentNav === index ? 'active' : '']" @tap="switchNav(item, index)">
        {{ item.name }}
      </view>
    </view>
  </scroll-view>
</template>

<script lang="ts" setup>
import { ref, toRefs } from 'vue';


interface IProps {
  navList: {
    name: string;
    value: string | number
  }[];
  color?: string;
  selectColor?: string;
  bgColor?: string;
  selectBgColor?: string;
  bg?: string
}

interface IEmit {
  (e: 'change', value: { index: number; item: IProps['navList'][0] }): void
}

const emit = defineEmits<IEmit>()

const currentNav = ref(0);

const props = withDefaults(defineProps<IProps>(), {
  navList: () => [],
  color: '#333',
  selectColor: '#fff',
  bgColor: '#f3f4f6',
  selectBgColor: '#2563eb'
});

const { navList, color, bgColor, selectBgColor, selectColor,bg } = toRefs(props)
const switchNav = (item: IProps['navList'][0], index: number) => {
  if (currentNav.value == index) return
  currentNav.value = index;
  const o = { index, item };
  emit('change', o);
};

</script>

<style lang="scss" scoped>
.selectMenu {
  flex-shrink: 0;
  width: 100%;
  background-color: #ffffff;
  padding: 0 20rpx;
}

.nav-list {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  height: 100%;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 32rpx;
  font-size: 14px;
  white-space: nowrap;
  background-color: var(--bgColor);
  color: var(--color);
  padding: 10rpx 30rpx;
  border-radius: 9999px;
  margin-right: 20rpx;

  &:last-child {
    margin-right: 0;
  }
}

.nav-item.active {
  color: var(--selectColor);
  font-weight: 500;
  background-color: var(--selectBgColor);
}
</style>